<template>
    <div class="app-container">
      <!-- 输入表单 -->
      <el-form label-width="120px">
        <el-form-item label="荣誉名称">
          <el-input v-model="honor.name" />
        </el-form-item>
        
        <el-form-item label="荣誉等级">
          <el-select v-model="honor.honorLevel" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        
        <el-form-item label="俱乐部">
          <el-select v-model="honor.clueId" clearable placeholder="请选择">
          <el-option
            v-for="item in clueList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  <script>
  
  import clueApi from "@/api/clue/clue";
  import honorApi from "@/api/honor/honor";
  export default {
      data() {
          return {
              honor:{},
              clueList: [],
              options: [{
                value: 0,
                label: '国际级'
              }, {
                value: 1,
                label: '国家级'
              }],
              pickerOptions: {
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
                shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                    picker.$emit('pick', new Date());
                  }
                }, {
                  text: '昨天',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                  }
                }, {
                  text: '一周前',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                  }
                }]
              },
          }
      },
      created() {
        if(this.$route.params.id){
          const id = this.$route.params.id;
          this.fetchDataById(id)
        }
        clueApi.getClueList()
        .then((response) => {
            this.clueList = response.data
        })
      },
      methods: {
        fetchDataById(id){
          honorApi.getHonorById(id)
          .then(response => {
            this.honor = response.data
          })
        },
        //添加
        save(){
          honorApi.saveHonor(this.honor)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/honor/honorList'})
          })
        },
        //修改
        update(){
          honorApi.updateHonor(this.honor)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/honor/honorList'})
          })
        },
        saveOrUpdate(){
          if(this.honor.id){
            this.update()
          }else{
            this.save()
          }
        },
        
      },
      
  }
  </script>